<template>
  <el-col :sapn="24">
  <p>主要代码：</p> 
       <div v-highlight>       
          <pre>
              <code class="github-dark line-numbers">{{ codeHtml }}</code>
          </pre>
        </div>
        <el-button :data-clipboard-text="codeHtml" @click="copy" id="equSN">复制代码</el-button>
</el-col>
</template>

<script>
import Clipboard from 'clipboard'
export default {
    name:'ShakeCode',
    data() {
        return {
            codeHtml:`<style>\r\n@keyframes shake {\r\n  10%,\r\n  90% {\r\n    transform: translate3d(-1px, 0 0);\r\n  }\r\n\r\n  20%,\r\n  80% {\r\n    transform: translate3d(2px, 0, 0);\r\n  }\r\n\r\n  30%,\r\n  50%,\r\n  70% {\r\n    transform: translate3d(-4px, 0, 0);\r\n  }\r\n\r\n  40%,\r\n  60% {\r\n    transform: translate3d(4px, 0, 0);\r\n  }\r\n}\r\n\r\n.apply-shake {\r\n  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\r\n}\r\n<\/style>`
        }
    },
    methods:{
        copy(){
     const clipboard=new Clipboard("#equSN")
     clipboard.on('success',e=>{
      this.$message.success('复制成功')
      clipboard.destroy()
     })
     clipboard.on('error',e=>{
      this.$message.warning('该浏览器不支持')
      clipboard.destroy()
     })
   }
    }

}
</script>

<style>

</style>